<template>
    <div class="id_card">
        <van-cell title="账户类型" :clickable="false">
            <template #right-icon>
                <radio-group v-model="formData.accountType" direction="horizontal" :disabled="shareInfo.merchantProperty=='4'">
                    <radio name="2">个人账户</radio>
                    <radio name="1">对公账户</radio>
                </radio-group>
            </template>
        </van-cell>

        <van-cell-group title="结算银行卡" v-if="formData.accountType == '2'">
            <div class="img_con">
                <upload-img desc="请上传银行卡正面" :imgUrl.sync="formData.cardPicture" fileType="004" @ocrBack="ocrBack"></upload-img>
            </div>
        </van-cell-group>
        <van-cell-group title="开户许可证" v-else>
            <div class="img_con">
                <upload-img desc="请上传开户许可证" :imgUrl.sync="formData.cardPicture" fileType="010"></upload-img>
            </div>
        </van-cell-group>

        <van-cell-group title="银行卡信息">
            <!-- <van-cell title="户名" :value="shareInfo.certificateName"></van-cell> -->
            <van-field v-model="formData.accountName" label="户名" placeholder="输入户名" />
            <van-field v-model="formData.accountNo" label="卡号" placeholder="输入卡号" />
            <van-field v-model="formData.bankTel" label="预留手机号" placeholder="输入银行预留手机号码" />
            <van-field v-model="formData.contactLine" clearable label="开户行行号" placeholder="请输入开户行行号">
                <template #button>
                    <van-button size="small" type="info" @click="$refs.popBankRef.show()">选择</van-button>
                </template>
            </van-field>
            <van-field v-model="formData.contactLineName" label="开户行名称" placeholder="输入开户行名称" />

            <van-cell title="是否默认卡">
                <template #right-icon>
                    <vant-switch v-model="formData.isDefault" />
                </template>
            </van-cell>
        </van-cell-group>
        <pop-bank ref="popBankRef" @done="bankInfo"></pop-bank>
    </div>
</template>

<script>
import { Switch } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { mapState } from "vuex"

import uploadImg from "@/components/form/upload-img";
import PopBank from "@/components/pop/pop-bank"

export default {
    props: ["shareInfo"],

    components: { uploadImg, vantSwitch: Switch, PopBank, RadioGroup, Radio },

    data() {
        return {
            idcard_front: require('@/assets/img/comp/idcard_front.png'),
            idcard_back: require('@/assets/img/comp/idcard_back.png'),

            formData: {
                accountName: "", // 户名
                accountNo: "", // 卡号	
                accountType: "2", // 结算账户类型 1：对公 2：对私
                bankTel: "", // 银行预留手机号码	
                contactLineName: "", // bankName
                contactLine: "", // contactLine
                isDefault: true, // 是否默认卡
                cardPicture: "", // 银行卡照片
            },
        }
    },

    mounted() {
        if (this.$config.appCode === "AGNAPP") {
            this.serverPrepareData();
        } else {
            this.prepareData();
        }
        window.scrollTo(0, 0);
    },

    computed: {
        ...mapState({
            baseData: state => state.baseData,
            custInfo: state => state.homeData.custInfo,
            serverInfo: state => state.homeData.serverInfo
        }),
    },

    methods: {

        // 商户加载
        prepareData() {
            // 进件状态
            if (['03'].indexOf(this.custInfo.certifyStatus) === -1) {
                return;
            }
            this.$http.collectionBankCard(this.custInfo.merchantCode).then(resp => {
                if (resp === false) {
                    return resp;
                }
                this.formData = resp;
                if (!this.formData.accountName) {
                    this.formData.accountName = this.shareInfo.certificateName
                }
            });
        },

        // 服务商加载
        serverPrepareData() {
            // 进件状态
            if (['03'].indexOf(this.serverInfo.certifyStatus) === -1) {
                return;
            }
            this.$http.collectionBankCard(this.serverInfo.merchantCode).then(resp => {
                if (resp === false) {
                    return resp;
                }
                this.formData = resp;
            });
        },

        ocrBack(e) {
            e.accountNo && (this.formData.accountNo = e.accountNo);
        },

        // 选择联行号回调
        bankInfo(e) {
            this.formData.contactLineName = e.text;
            this.formData.contactLine = e.code; // contactLine
        },

        pickerCommit(sltObj, key) {
            this[key] = sltObj.showText;
            this.formData[key] = sltObj.code;
        },

        submitForm() {
            if (this.isLong) {
                this.formData.certificateExpireDate = "长期"
            }
            let _merchantCode = "";
            if (this.$config.appCode === "AGNAPP") {
                _merchantCode = this.serverInfo.code;
            } else {
                _merchantCode = this.custInfo.merchantCode;
            }
            return {
                ...this.formData,
                merchantCode: _merchantCode,
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.id_card {
    width: 100%;
    .img_con {
        // padding: 10px;
    }
    .var_butt {
        width: 80px;
    }
}
</style>
